<template>
  <div class="defectManagebox">
    <div class="topbox" :style="{height:isheight+'px'}">
      <SearchFor ref="SearchForrefs" @zhankai="zhankai" @toshuaxin="toshuaxin" :qiyelist="qiyelist" @getlist="gettablelist"></SearchFor>
    </div>
    <div class="bodybox" :style="{height: `calc(${100}% - ${number}px)`}">
      <TopTitle @command="command" @daochu="daochu" @shuaxin="gettablelist" >
        <template #otherbutton>
          <el-button  type="primary" size="small" @click="add"><i class="el-icon-plus"></i> 新增缺陷</el-button>
        </template>
      </TopTitle>
      <Dialog ref="Dialogrefs" @getlist="gettablelist"></Dialog>
      <div class="table">
        <TableColumn  :tableConfig="tableConfig" :issize="iissize"
           :tableData="tableData" ref="tablecolumn">
           <template>
            <el-table-column
            width="150"
            label="填报图片">
             <template #default="{row}" >
              <div v-if="row.createPictureMap && Object.keys(row.createPictureMap).length > 0">
                <div  v-for="fileName in Object.keys(row.createPictureMap)" :key="fileName" class="text-overflow">
                  <el-button type="text" class="text-overflow" @click="handleButtonClick(fileName, row.createPictureMap[fileName])">
                    {{ fileName }}
                  </el-button>
                </div>
              </div>
             </template>
            </el-table-column>
            <el-table-column
              width="200"
              label="操作">
              <template #default="{row}">
                <el-button  type="text" @click="tolook(row.state==0?1:row.state==1?2:row.state==2?3:row.state==3?4:5,row,true)">浏览</el-button>
                <el-button  type="text" v-show="row.updateButtonFlag" @click="$refs.Dialogrefs.toupdate(1,row)">修改</el-button>
                <el-button  type="text" v-show="row.submitButtonFlag" @click="$refs.Dialogrefs.toupdate(1,row,true)">提交</el-button>
                <el-button  type="text" v-show="row.deleteButtonFlag" @click="dellist(row)">删除</el-button>
                <el-button  type="text" v-show="row.solveButtonFlag"  @click="$refs.Dialogrefs.toupdate(row.state==3?4:3,row)">消缺</el-button>
                <el-button  type="text" v-show="row.checkButtonFlag"  @click="$refs.Dialogrefs.toupdate(5,row)">验收</el-button>
              </template>
            </el-table-column>
           </template>
        </TableColumn>
        <el-dialog :visible.sync="dialogVisibles" :append-to-body="true">
           <img width="100%" :src="'data:image/jpeg;base64,' + fileData" alt="">
        </el-dialog>
      </div>
      <div class="fenye">
        <el-pagination
            background
            layout="prev, pager, next"
            :current-page.sync="pageNo"
            @current-change="gettablelist"
            :total="totalCount"
            :page-size="10"
          >
          </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {exportexcel} from '@/utils/excel'
import { getuserlistapi } from '@/api/analysis'
import {getdefectlistapi,getdangeimgapi,postdellistapi} from '@/api/system/defectManage'
import Dialog from './dialog/index.vue'
import TableColumn from '@/components/Table'
import TopTitle from '@/components/TopTitle/newtitle'
import SearchFor from './SearchFor.vue'
export default {
  name: 'CallPoliceIndex',
  components: {
    Dialog,
    TopTitle,
    SearchFor,
    TableColumn
  },
  data() {
    return {
      formInline: {},
      value2:['',''],
      fileData:'',
      number: 94,
      isheight:84,
      dialogVisibles:false,
      pageNo: 1,
      qiyelist:[],
      pageSize: 10,
      totalCount:0,
      iissize: 'medium',
      tableData: [],
      tableConfig: [
        { label: '序号', type:'index',width:'80' },
        { label: '缺陷编号', prop: 'code' },
        { label: '用电企业', prop: 'orgName' },
        { label: '设备名称', prop: 'equipName' },
        { label: '缺陷等级', prop: 'levelName' },
        { label: '发现时间', prop: 'findDate'},
        { label: '发现人', prop: 'discovererName' },
        { label: '消缺结果', prop: 'defectDescription' },
        { label: '状态', prop: 'stateName' ,center:'center'},
      ]
    };
  },

  async mounted() {
    const { data: { list } } = await getuserlistapi()
    this.qiyelist=list
    
    
    this.gettablelist()
  },

  methods: {
    // 获取表格数据
    async gettablelist() { 
      this.$refs.tablecolumn.loading=true
      const { data: { list, totalCount } } = await getdefectlistapi({
        pageNo: this.pageNo - 1, pageSize: this.pageSize, ...this.formInline,
        fromDate:this.value2[0],toDate:this.value2[1]
      })
      this.tableData = list
      this.totalCount = totalCount
      this.$refs.tablecolumn.loading=false
    },
    // 删除
    dellist(row){
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
            await postdellistapi(row.id).then(res => {
              if (res.code == '200') this.gettablelist()
              this.$message({
                type: res.code == '200' ? 'success' : 'warning',
                message: res.code == '200' ? '删除成功':res.message
              })
             })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 新增
    add() {
      this.$refs.Dialogrefs.adddefect()
    },
    // 浏览/提交
    tolook(val, row, flag) {
      this.$refs.Dialogrefs.tolooks(val, row, flag)
    },
    // 查看附件
    async handleButtonClick(id, name) {
      const {data:{entity}} = await getdangeimgapi({fileId:name})
      this.fileData=entity.fileData
      this.dialogVisibles=true
    },
    // 查询/重置
    toshuaxin(val, arr) {
      this.formInline = val
      this.value2 = arr
      this.gettablelist()
    },
    // 表格密度调节
    command(val) {
      this.iissize = val
    },
    daochu() {
      exportexcel('/pio-microservice-biz/pio/defect/work/order/exportExcel', {
         ...this.formInline,fromDate:this.value2[0],toDate:this.value2[1]
      },'缺陷列表')
     },
    zhankai(val){
      if (val) {
        this.isheight = 144
        this.number = 154
      } else {
        this.isheight = 84
        this.number = 94
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.defectManagebox{
  height: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  .topbox{
     background-color: #fff;
     margin-bottom: 10px;
  }
  .bodybox{
    // flex: 1;
    background-color: #fff;
    padding: 20px;
    .table{
      height:90%;
      .text-overflow {
            white-space: nowrap; /* 强制文本在一行内显示，不换行 */
            overflow: hidden; /* 超出部分隐藏 */
            text-overflow: ellipsis; /* 用省略号表示溢出的文本 */
            width: 120px;
        }
    }
    .fenye{
      text-align: right;
      margin-top: 10px;
    }
  }
}
</style>